<template>
  <div>
    <!-- 添加优惠 -->
    <el-dialog
      title="添加优惠"
      :visible.sync="preferentialItemVis"
      width="500px"
      @close="preferentialItemCancle"
    >
      <div class="preferentialItem">
        <el-form
          :model="preferentialItemObj"
          :rules="preferentialItemRules"
          ref="preferentialItemForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="优惠类型" prop="preType">
            <el-select
              v-model="preferentialItemObj.preType"
              placeholder="请选择优惠类型"
              filterable
              class="w-100"
              @change="preTypeChange"
            >
              <el-option
                v-for="item in preTypeOption"
                :disabled="
                  preferentialItemObj.contentType === 'P' && item.value === 'C'
                    ? true
                    : false
                "
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="优惠次卡"
            prop="moneyCardId"
            v-if="preferentialItemObj.preType === 'C'"
          >
            <el-select
              v-model="preferentialItemObj.moneyCardId"
              placeholder="请选择优惠次卡"
              filterable
              :loading="moneyCardLoading"
              class="w-100"
            >
              <el-option
                v-for="item in moneyCardArry"
                :key="item.cardId"
                :label="item.cardName"
                :value="item.cardId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="次卡数量"
            prop="moneyCardCount"
            v-if="preferentialItemObj.preType === 'C'"
          >
            <el-input-number
              v-model="preferentialItemObj.moneyCardCount"
              :precision="0"
              :step="1"
              :min="1"
              :max="preferentialItemObj.MaxNumber"
              class="w-100"
            ></el-input-number>
          </el-form-item>

          <el-form-item
            label="团购类型"
            prop="moneyCardId"
            v-if="preferentialItemObj.preType === 'L'"
          >
            <el-select
              v-model="preferentialItemObj.moneyCardId"
              placeholder="请选择团购类型"
              filterable
              :loading="moneyCardLoading"
              class="w-100"
            >
              <el-option
                v-for="item in moneyType"
                :key="item.channelId"
                :label="item.channelName"
                :value="item.channelId"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="优惠金额"
            prop="preMoney"
            v-if="preferentialItemObj.preType === 'L'"
          >
            <el-input-number
              v-model="preferentialItemObj.preMoney"
              :precision="2"
              :step="0.1"
              :min="0"
              :max="Number(preferentialItemObj.serverPriceSum)"
              :controls="false"
              class="w-100 text-left"
            ></el-input-number>
          </el-form-item>

          <el-form-item
            label="实收金额"
            prop="realMoney"
            v-if="preferentialItemObj.preType === 'L'"
          >
            <el-input-number
              v-model="preferentialItemObj.realMoney"
              :precision="2"
              :step="0.1"
              :min="0"
              :max="Number(preferentialItemObj.serverPriceSum)"
              :controls="false"
              class="w-100 text-left"
            ></el-input-number>
          </el-form-item>

          <div
            v-if="
              preferentialItemObj.preType === 'C' ||
              preferentialItemObj.preType === 'L'
            "
          >
            <el-form-item
              v-for="(domain, index) in preferentialItemObj.minorCardNoList"
              :label="'优惠券码' + (index + 1)"
              :key="index"
              :prop="'minorCardNoList.' + index + '.value'"
              :rules="{
                required: true,
                message: '优惠券码不能为空',
                trigger: 'blur',
              }"
            >
              <el-input v-model="domain.value"></el-input>
            </el-form-item>
          </div>

          <el-form-item
            label="优惠信息"
            prop="preMoney"
            v-if="preferentialItemObj.preType === 'M'"
          >
            <el-input-number
              v-model="preferentialItemObj.preMoney"
              :precision="2"
              :step="0.1"
              :min="0"
              :max="preferentialItemObj.serverPriceSum"
              :controls="false"
              class="w-100 text-left"
            ></el-input-number>
          </el-form-item>

          <el-form-item
            label="优惠信息"
            prop="bfb"
            v-if="preferentialItemObj.preType === 'P'"
          >
            <el-input-number
              v-model="preferentialItemObj.bfb"
              :precision="2"
              :step="0.1"
              :min="0"
              :max="100"
              :controls="false"
              class="w-100 text-left"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="preferentialItemCancle">取消</el-button>
        <el-button
          type="primary"
          :loading="preferentialItemLoading"
          @click="preferentialItemSave"
          >确认</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMinorCardListByItemId,
  getCardType,
} from "@/api/business/BusinessIndex";
export default {
  name: "EryuoaStoreFrontendAddPre",

  data() {
    return {
      title: "",
      moneyCardLoading: false,
      // 添加优惠
      preferentialItemVis: false,
      preferentialItemLoading: false,
      preferentialItemObj: {
        index: -1,
        MaxNumber: 0,
        serverPriceSum: 0,
        bfb: 0,
        moneyCardCount: 0,
        moneyCardId: "",
        preMoney: "",
        preType: "",
        minorCardNoList: [],
        realMoney: "",
      },
      moneyType: [], // 团购类型
      preTypeOption: [
        {
          label: "次卡优惠",
          value: "C",
        },
        {
          label: "百分比优惠",
          value: "P",
        },
        {
          label: "金额优惠",
          value: "M",
        },
        {
          label: "团购优惠",
          value: "L",
        },
      ],

      preferentialItemRules: {
        preType: [
          { required: true, message: "请选择优惠类型", trigger: "change" },
        ],

        moneyCardId: [
          { required: true, message: "请选择优惠次卡", trigger: "change" },
        ],

        moneyCardCount: [
          { required: true, message: "请选择优惠数量", trigger: "change" },
        ],

        preMoney: [
          { required: true, message: "请输入优惠金额", trigger: "change" },
        ],
        bfb: [
          { required: true, message: "请输入优惠百分比", trigger: "change" },
        ],
        realMoney: [
          { required: true, message: "请输入实收金额", trigger: "change" },
        ],
      },
    };
  },

  watch: {
    "preferentialItemObj.moneyCardCount": {
      handler(newVal) {
        let minorCardNoList = this.preferentialItemObj.minorCardNoList;
        if (newVal === "" || newVal === undefined || newVal === null) {
        } else if (newVal > minorCardNoList.length) {
          let n = newVal - minorCardNoList.length;
          for (let i = 0; i < n; i++) {
            this.preferentialItemObj.minorCardNoList.push({
              value: "",
            });
          }
        } else if (newVal < minorCardNoList.length) {
          let n = minorCardNoList.length - newVal;
          for (let i = 0; i < n; i++) {
            this.preferentialItemObj.minorCardNoList.splice(
              this.preferentialItemObj.minorCardNoList.length - 1,
              1
            );
          }
        }
      },
      deep: true,
    },
  },

  mounted() {},

  methods: {
    preTypeChange() {
      this.preferentialItemObj.moneyCardCount = 0;
      this.preferentialItemObj.moneyCardId = "";
      this.preferentialItemObj.preMoney = "";
      this.preferentialItemObj.bfb = 0;

      this.moneyCardArry = [];
      this.preferentialItemObj.minorCardNoList = [];

      if (this.preferentialItemObj.preType === "C") {
        this.preferentialItemObj.moneyCardCount = 1;
        this.getAllMoneyCard();
      } else if (this.preferentialItemObj.preType === "L") {
        this.getCardTypes();
      }
    },

    getCardTypes() {
      getCardType()
        .then((res) => {
          const { code, data } = res;
          if (code === 0) {
            this.moneyType = data;
          }
        })
        .catch((err) => {});
    },

    getAllMoneyCard() {
      this.moneyCardLoading = true;
      getMinorCardListByItemId({
        itemId: this.preferentialItemObj.itemId,
      })
        .then((res) => {
          this.moneyCardLoading = false;
          const { code, data } = res;
          if (code === 0) {
            this.moneyCardArry = data;
          }
        })
        .catch((err) => {
          this.moneyCardLoading = false;
        });
    },

    // 添加优惠
    preferentialItemOpen(row, index) {
      this.preferentialItemObj.index = index;
      this.preferentialItemObj.MaxNumber = row.serverCount;
      this.preferentialItemObj.itemId = row.contentId;
      this.preferentialItemObj.bfb = 0;
      this.preferentialItemObj.serverPriceSum = row.serverPriceSum;
      this.preferentialItemObj.contentType = row.contentType;
      this.preferentialItemObj.price = row.price;
      console.log(row);
      this.preferentialItemVis = true;
    },

    preferentialItemCancle() {
      this.resetFormData("preferentialItemForm");
      this.$nextTick(() => {
        this.preferentialItemVis = false;
        this.preferentialItemLoading = false;
      });
    },

    preferentialItemSave() {
      if (this.preferentialItemLoading) {
        return false;
      }

      this.$refs["preferentialItemForm"].validate((valid) => {
        if (valid) {
          const pitem = JSON.parse(JSON.stringify(this.preferentialItemObj));
          const {
            index,
            moneyCardCount,
            moneyCardId,
            preMoney,
            preType,
            bfb,
            price,
            serverPriceSum,
            minorCardNoList,
            realMoney,
          } = pitem;
          let obj = {};

          obj.moneyCardCount = "";
          obj.moneyCardId = "";
          obj.realMoney = "";
          obj.preType = preType;
          obj.minorCardNoList = minorCardNoList;

          if (preType === "C") {
            obj.moneyCardCount = moneyCardCount;
            obj.moneyCardId = moneyCardId;
            obj.preMoney = (Number(price) * Number(moneyCardCount)).toFixed(2);
          } else if (preType === "L") {
            obj.moneyCardCount = moneyCardCount;
            obj.realMoney = realMoney;
            obj.preMoney = Number(preMoney).toFixed(2);
          } else if (preType === "M") {
            obj.preMoney = Number(preMoney).toFixed(2);
          } else if (preType === "P") {
            let preMoneys = (
              (Number(serverPriceSum) * Number(bfb)) /
              100
            ).toFixed(3);

            obj.preMoney = (Math.floor(Number(preMoneys) * 100) / 100).toFixed(
              2
            );
          }
          obj.isYh = true;

          this.$emit("AddPre", {
            obj,
            index,
          });

          this.$nextTick(() => {
            this.preferentialItemCancle();
          });
        } else {
          return false;
        }
      });
    },

    resetFormData(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped></style>
